<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>百度注册页面正则验证</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    p {
      height: 30px;
      line-height: 30px;
      margin-top: 10px;
    }

    p label {
      display: inline-block;
      width: 100px;
      height: 30px;
      text-align: right;
    }

    p input {
      height: 30px;
    }
  </style>
</head>

<body>
  <p class="uname-box">
    <label for="uname">用户名：</label>
    <input type="text" id="uname" placeholder="请输入用户名">
  </p>
  <p class="tel-box">
    <label for="tel">手机号：</label>
    <input type="number" id="tel" placeholder="请输入手机号">
  </p>
  <p class="uname-box">
    <label for="pwd">密码：</label>
    <input type="password" id="pwd" placeholder="请输入密码">
  </p>

  <script>
    // 百度注册页面正则验证
    /*
    用户名：14个字母
-   手机号：11位数字
    +   只能以1开头
    +   第二位数 3 5 6 7 8 9
-   密码：
    +   8-14个字符
    +   数字 字母 标点标点符号 组成
    */
    let uname = document.querySelector("#uname") //用户名
    let tel = document.querySelector("#tel") //手机号
    let pwd = document.querySelector("#pwd") //密码

    //用户名失去焦点的时候，验证
    uname.onblur = function () {
      let reg = /^[a-zA-Z]{14}/
      let unameVal = uname.value;
      if (reg.test(unameVal)) {
        alert("符合")
      } else {
        alert("请输入14位的字符")
      }
    }

    //手机号失去焦点的时候，验证
    tel.onblur = function () {
      // 手机号：11位数字  只能以1开头  第二位数 3 5 6 7 8 9
      let reg = /^1[3|5|6|7|8|9][0-9]{9}$/
      let telVal = tel.value
      if (reg.test(telVal)) {
        alert("符合")
      } else {
        alert("请输入11位数的手机号码")
      }
    }

    //密码失去焦点的时候，验证
    pwd.onblur = function () {
      // 密码：8-14个字符 数字 字母 标点标点符号 组成
      let reg = /^[0-9a-zA-Z,.]{8,14}/
      let pwdVal = pwd.value;
      if (reg.test(pwdVal)) {
        alert("符合")
      } else {
        alert("请输入符合的密码")
      }
    }
  </script>
</body>

</html>